<template>
  <el-drawer
    v-model="drawerVisible"
    title="系统设置"
    direction="rtl"
    size="350px"
  >
    <div class="drawer-content">
      <el-divider>主题设置</el-divider>

      <!-- 主题风格选择 -->
      <div class="setting-item theme-mode-item">
        <span>主题风格</span>
        <el-segmented
          v-model="tempSettings.themeMode"
          :options="themeModeOptions"
          size="small"
          @change="val => handlePreview('themeMode', val)"
        />
      </div>

      <div class="setting-item">
        <span>主题色</span>
        <el-color-picker
          v-model="tempSettings.themeColor"
          size="small"
          @change="handleThemeChange"
          :predefine="predefineColors"
        />
      </div>

      <div class="setting-item">
        <span>灰色模式</span>
        <el-switch 
          v-model="tempSettings.greyMode"
          @change="val => handlePreview('greyMode', val)"
        />
      </div>

      <el-divider>界面设置</el-divider>

      <!-- 菜单风格选择 -->
      <div class="setting-item theme-mode-item">
        <span>菜单风格</span>
        <el-segmented
          v-model="tempSettings.menuTheme"
          :options="menuThemeOptions"
          size="small"
          @change="val => handlePreview('menuTheme', val)"
        />
      </div>

      <!-- 菜单布局选择 -->
      <div class="setting-item menu-layout-section">
        <span>菜单布局</span>
      </div>
      <div class="menu-layout-grid">
        <div
          v-for="layout in menuLayoutOptions"
          :key="layout.value"
          class="layout-item"
          :class="{ active: tempSettings.menuLayout === layout.value }"
          @click="handlePreview('menuLayout', layout.value)"
        >
          <div class="layout-preview" :class="`layout-${layout.value}`">
            <div class="preview-aside" v-if="layout.value !== 'horizontal'"></div>
            <div class="preview-main">
              <div class="preview-header" v-if="layout.value === 'horizontal' || layout.value === 'mixed'"></div>
              <div class="preview-content"></div>
            </div>
            <div class="preview-double" v-if="layout.value === 'double'"></div>
          </div>
          <div class="layout-name">{{ layout.label }}</div>
        </div>
      </div>

      <div class="setting-item">
        <span>显示 Logo</span>
        <el-switch
          v-model="tempSettings.showLogo"
          @change="val => handlePreview('showLogo', val)"
        />
      </div>
      <div class="setting-item">
        <span>显示面包屑</span>
        <el-switch
          v-model="tempSettings.showBreadcrumb"
          @change="val => handlePreview('showBreadcrumb', val)"
        />
      </div>
      <div class="setting-item">
        <span>折叠菜单</span>
        <el-switch
          :model-value="isCollapse"
          @update:model-value="(val: boolean) => emit('update:isCollapse', val)"
        />
      </div>
      <div class="setting-item">
        <span>显示标签页</span>
        <el-switch 
          v-model="tempSettings.showTags"
          @change="val => handlePreview('showTags', val)"
        />
      </div>
 
      <div class="setting-item">
        <span>动态标题</span>
        <el-switch 
          v-model="tempSettings.dynamicTitle"
          @change="val => handlePreview('dynamicTitle', val)"
        />
      </div>
      <div class="setting-item">
        <span>开启水印</span>
        <el-switch 
          v-model="tempSettings.watermark"
          @change="val => handlePreview('watermark', val)"
        />
      </div>
      <div class="setting-item">
        <span>显示页脚</span>
        <el-switch 
          v-model="tempSettings.showFooter"
          @change="val => handlePreview('showFooter', val)"
        />
      </div>

      <div class="setting-item">
        <span>布局大小</span>
        <el-radio-group 
          v-model="tempSettings.fontSize" 
          size="small"
          @change="val => handlePreview('fontSize', val)"
        >
          <el-radio-button value="small">小</el-radio-button>
          <el-radio-button value="default">中</el-radio-button>
          <el-radio-button value="large">大</el-radio-button>
        </el-radio-group>
      </div>

     

      <el-divider>动画设置</el-divider>
      <div class="setting-item animation-item">
        <span>页面切换动画</span>
        <el-select
          v-model="tempSettings.pageAnimation"
          size="small"
          style="width: 150px"
          @change="val => handlePreview('pageAnimation', val)"
        >
          <el-option label="左侧滑入" value="slide-left" />
          <el-option label="右侧滑入" value="slide-right" />
          <el-option label="上方滑入" value="slide-up" />
          <el-option label="下方滑入" value="slide-down" />
          <el-option label="淡入淡出" value="fade" />
          <el-option label="淡入缩放" value="fade-scale" />
          <el-option label="淡入滑动" value="fade-slide" />
          <el-option label="缩放动画" value="zoom" />
          <el-option label="缩放淡出" value="zoom-fade" />
          <el-option label="翻转动画" value="flip" />
          <el-option label="旋转动画" value="rotate" />
          <el-option label="弹跳动画" value="bounce" />
          <el-option label="弹性动画" value="elastic" />
          <el-option label="无动画" value="none" />
        </el-select>
      </div>

      <!-- 动画预览说明 -->
      <div class="animation-tip">
        <el-text size="small" type="info">
          <el-icon><InfoFilled /></el-icon>
          切换菜单可预览动画效果
        </el-text>
      </div>

      <el-divider>标签页样式</el-divider>
      <div class="tags-style-list">
        <div
          v-for="style in tagsStyles"
          :key="style.value"
          class="style-item"
          :class="{ active: settingsStore.tagsStyle === style.value }"
          @click="handlePreview('tagsStyle', style.value)"
        >
          <div class="style-preview" :class="style.value">
            <span class="tag">首页</span>
            <span class="tag">列表页</span>
            <span class="tag active">详情页</span>
          </div>
          <div class="style-name">{{ style.label }}</div>
        </div>
      </div>

      <div class="drawer-footer">
        <el-button @click="resetSettings">恢复默认</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
import { useSettingsStore } from '@/store/modules/settings'
import type { SettingsState } from '@/store/modules/settings'

const props = defineProps<{
  visible: boolean
  isCollapse: boolean
}>()

const emit = defineEmits<{
  'update:visible': [value: boolean]
  'update:isCollapse': [value: boolean]
}>()

const settingsStore = useSettingsStore()

// 处理抽屉显示状态
const drawerVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 临时设置状态
const tempSettings = ref<Partial<SettingsState>>({
  theme: settingsStore.theme as 'light' | 'dark',
  themeMode: settingsStore.themeMode,
  themeColor: settingsStore.themeColor,
  menuLayout: settingsStore.menuLayout,
  menuTheme: settingsStore.menuTheme,
  showLogo: settingsStore.showLogo,
  showBreadcrumb: settingsStore.showBreadcrumb,
  showTags: settingsStore.showTags,
  watermark: settingsStore.watermark,
  greyMode: settingsStore.greyMode,
  fontSize: settingsStore.fontSize,
  pageAnimation: settingsStore.pageAnimation,
  tagsStyle: settingsStore.tagsStyle,
  dynamicTitle: settingsStore.dynamicTitle,
  showFooter: settingsStore.showFooter,
})

// 主题模式选项
const themeModeOptions = [
  { label: '浅色', value: 'light' },
  { label: '深色', value: 'dark' },
  { label: '跟随系统', value: 'auto' }
]

// 菜单风格选项
const menuThemeOptions = [
  { label: '浅色', value: 'light' },
  { label: '深色', value: 'dark' },
  { label: '跟随主题', value: 'auto' }
]

// 菜单布局选项
const menuLayoutOptions = [
  { label: '垂直', value: 'vertical' },
  { label: '双列', value: 'double' }
]


const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
])

// 处理预览
const handlePreview = (key: keyof SettingsState, value: any) => {
  tempSettings.value[key] = value

  // 处理主题模式切换 - 需要同时更新theme字段
  if (key === 'themeMode') {
    if (value === 'auto') {
      // 跟随系统
      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
      tempSettings.value.theme = isDark ? 'dark' : 'light'
    } else {
      // 手动设置
      tempSettings.value.theme = value
    }
  }

  settingsStore.saveSettings(tempSettings.value)

  // 处理字体大小切换
  if (key === 'fontSize') {
    document.documentElement.setAttribute('data-size', value)
  }
}

// 处理主题色变化
const handleThemeChange = (color: string | null) => {
  if (color) {
    tempSettings.value.themeColor = color
    settingsStore.saveSettings(tempSettings.value)
  }
}

// 重置设置
const resetSettings = () => {
  settingsStore.resetSettings()
  tempSettings.value = {
    theme: settingsStore.theme,
    themeColor: settingsStore.themeColor,
    showLogo: settingsStore.showLogo,
    showBreadcrumb: settingsStore.showBreadcrumb,
    showTags: settingsStore.showTags,
    greyMode: settingsStore.greyMode,
    fontSize: settingsStore.fontSize,
    pageAnimation: settingsStore.pageAnimation,
    dynamicTitle: settingsStore.dynamicTitle,
    showFooter: settingsStore.showFooter,
  }
  ElMessage.success('已恢复默认设置')
}

const tagsStyles = [
  { label: '谷歌', value: 'card' },
  { label: '边框式', value: 'border' },
  { label: '现代风', value: 'modern' }
]

</script>

<style scoped lang="scss">
.drawer-content {
  padding: 0 20px 20px 20px;
  padding-bottom: 50px;
  height: 100%;
  overflow-y: auto;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0;
}

.setting-item span {
  color: var(--el-text-color-primary);
  font-size: 14px;
}

:deep(.el-divider__text) {
  font-size: 15px;
  font-weight: 500;
}

.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  background-color: var(--el-bg-color);
  border-top: 1px solid var(--el-border-color-light);
  z-index: 1;
}

.tags-style-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}

.style-item {
  cursor: pointer;
  text-align: center;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
  }

  &.active .style-preview {
    border-color: v-bind('settingsStore.themeColor');
  }
}

.style-preview {
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--el-fill-color-light);
  margin-bottom: 8px;
}

.tag {
  display: inline-block;
  padding: 2px 6px;
  font-size: 12px;
  margin: 2px;
  border-radius: 4px;
  background: var(--el-bg-color);
  
  &.active {
    background: v-bind('settingsStore.themeColor');
    color: white;
  }
}

.style-name {
  font-size: 13px;
  color: var(--el-text-color-regular);
}

// 动画提示样式
.animation-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;

  span {
    width: 100%;
  }
}

.animation-tip {
  margin: 8px 0 16px 0;
  padding: 12px;
  background: var(--el-fill-color-light);
  border-radius: 8px;
  border-left: 3px solid var(--el-color-info);

  :deep(.el-text) {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .el-icon {
    font-size: 16px;
  }
}

// 主题模式选项样式
.theme-mode-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;

  span {
    width: 100%;
  }

  :deep(.el-segmented) {
    width: 100%;
  }
}

// 菜单布局选项样式
.menu-layout-section {
  margin-bottom: 8px;

  span {
    font-weight: 500;
  }
}

.menu-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 8px 0 16px 0;
}

.layout-item {
  cursor: pointer;
  text-align: center;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);

    .layout-preview {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }

  &.active .layout-preview {
    border-color: v-bind('settingsStore.themeColor');
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  }
}

.layout-preview {
  height: 60px;
  border: 2px solid var(--el-border-color-light);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--el-bg-color);
  display: flex;
  transition: all 0.3s;
  position: relative;
}

// 垂直布局
.layout-vertical {
  .preview-aside {
    width: 25%;
    background: var(--el-fill-color-dark);
    border-right: 1px solid var(--el-border-color);
  }

  .preview-main {
    flex: 1;
    background: var(--el-fill-color-light);
  }

  .preview-content {
    width: 100%;
    height: 100%;
  }
}

// 水平布局
.layout-horizontal {
  flex-direction: column;

  .preview-header {
    width: 100%;
    height: 30%;
    background: var(--el-fill-color-dark);
    border-bottom: 1px solid var(--el-border-color);
  }

  .preview-main {
    flex: 1;
    width: 100%;
  }

  .preview-content {
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
  }
}

// 混合布局
.layout-mixed {
  flex-direction: column;

  .preview-header {
    width: 100%;
    height: 25%;
    background: var(--el-fill-color-dark);
    border-bottom: 1px solid var(--el-border-color);
  }

  .preview-main {
    flex: 1;
    display: flex;
  }

  .preview-aside {
    width: 25%;
    background: var(--el-fill-color-dark);
    border-right: 1px solid var(--el-border-color);
  }

  .preview-content {
    flex: 1;
    background: var(--el-fill-color-light);
  }
}

// 双列布局
.layout-double {
  .preview-aside {
    width: 15%;
    background: var(--el-fill-color-darker);
    border-right: 1px solid var(--el-border-color);
  }

  .preview-double {
    width: 15%;
    background: var(--el-fill-color-dark);
    border-right: 1px solid var(--el-border-color);
  }

  .preview-main {
    flex: 1;
    background: var(--el-fill-color-light);
  }

  .preview-content {
    width: 100%;
    height: 100%;
  }
}

.layout-name {
  font-size: 13px;
  color: var(--el-text-color-regular);
  font-weight: 500;
}
</style> 